<template>
  <div class="container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入商品名称" v-model="listQuery.name">
      </el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
    </div>

    <div class="goods-list-box">
      <div class="goods-list">
        <div class="goods-show-info" v-for="(item, index) in list" :key="index" @click="gotoDetail(item.id)">
          <div class="goods-show-img">
            <img :src="item.picUrl" style="width:175px;height:175px;" />
          </div>
          <div class="goods-show-price">
            <span>
              <span class="seckill-price text-danger">￥{{item.retailPrice}}</span>
            </span>
          </div>
          <div class="goods-show-seller">
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { goodsList } from '@/api/goods'
import VueQr from 'vue-qr'

export default {
  name: 'goods',
  components: { VueQr },
  data() {
    return {
      list: null,
      total: null,
      plusFlag: ['', '+', '  '],
      listQuery: {
        page: 1,
        limit: 10,
        name: ''
      }
    }
  },
  created() {
    this.goodsList()
  },
  methods: {
    goodsList() {
      this.listLoading = true
      goodsList(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.goodsList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.goodsList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.goodsList()
    },
    gotoDetail(id) {
      this.$router.push({ name: 'goodsDetail', params: { orderId: id }})
    }
  }
}
</script>
<style scoped>
.container {
  margin: 15px auto;
  width: 93%;
  min-width: 1000px;
}
.goods-list-box {
  margin-left: 0px;
  width: calc(100% - 215px);
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
}
.goods-show-info {
  width: 200px;
  padding: 10px 10px 5px 10px;
  margin: 15px 2px;
  border: 1px solid #fff;
  cursor: pointer;
}
.goods-show-info:hover {
  border: 1px solid #ccc;
  box-shadow: 0px 0px 15px #ccc;
}
.goods-show-price {
  margin-top: 6px;
}
.goods-show-detail {
  font-size: 12px;
  margin: 6px 0px;
}
.goods-show-seller {
  margin-top: 10px;
  font-size: 12px;
}
.seckill-price {
  color: #e4393c;
}
</style>